<template>
  <div class="chat-box">
    <div class="chat-wrapper" :class="{ open: showChat }">
      <div class="chat">
        <div class="chat-header">
          <span>智能小助手</span>
          <span class="close" href="#" @click="showChat = !showChat">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-x"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path stroke="#fff" d="M18 6l-12 12"></path>
              <path stroke="#Fff" d="M6 6l12 12"></path>
            </svg>
          </span>
        </div>
        <div class="chat-body">
          <div
            class="chat-message-item"
            :class="{ out: item.role == 'roboto' }"
            v-for="(item, index) in messageList"
            :key="index"
          >
            {{ item.content }}
          </div>
        </div>
        <div class="chat-footer">
          <input
            type="text"
            v-model="inputMessage"
            placeholder="输入你问题..."
          />
          <el-tooltip content="发送" placement="top" effect="dark">
            <div class="chat-submit-button" @click="postMessage">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-mood-smile"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                stroke-width="1"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  stroke="white"
                  d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"
                ></path>
                <path stroke="white" d="M9 10l.01 0"></path>
                <path stroke="white" d="M15 10l.01 0"></path>
                <path stroke="white" d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
              </svg>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <el-badge :value="messageNum" class="item">
      <div class="chat-button" :class="{ open: showChat }" @click="openChat">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon icon-tabler icon-tabler-message-dots"
          width="40"
          height="40"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill=""></path>
          <path
            d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"
          ></path>
          <path d="M12 11l0 .01"></path>
          <path d="M8 11l0 .01"></path>
          <path d="M16 11l0 .01"></path>
        </svg>
      </div>
    </el-badge>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      showChat: false,
      inputMessage: "",
      messageList: [
        {
          role: "roboto",
          content: "嗨，我是AI智能小助手，你可以和我对话哦 :）",
        },
      ],
      messageNum: 1,
    };
  },
  methods: {
    openChat() {
      this.showChat = !this.showChat;
      this.messageNum = this.showChat ? null : this.messageNum;
    },
    postMessage() {
      if (this.inputMessage.trim().length != 0) {
        let messagesData = {
          model: "gpt-3.5-turbo",
          messages: [{ role: "user", content: this.inputMessage }],
          temperature: 0.7,
        };
        this.messageList.push(messagesData.messages[0]);

        // Axios({
        //   url: "https://api.openai.com/v1/chat/completions",
        //   headers: {
        //     Authorization:
        //       "Bearer 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",
        //     ContentType: "application/json",
        //   },
        //   method: "POST",
        //   data: messagesData,
        // })
        //   .then((r) => {
        //     console.log(r);
        //   })
        //   .catch((e) => {
        //     console.log(e);
        //   });
        this.inputMessage = "";
      }
    },
  },
  mounted() {
    const chatBody = document.querySelector(".chat .chat-body");
    chatBody.scrollTo({
      top: chatBody.scrollHeight,
    });
  },
};
</script>
<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
.content {
  padding: 0px;
  background: none;
  background-color: none;
}
* {
  box-sizing: border-box;
}

::v-deep .el-badge__content.is-fixed {
  transform: translateY(-20%) translateX(70%) !important;
}
.chat-box {
  text-align: right;
  .chat-button {
    padding: 12px;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    background-color: #fff;
    width: 62px;
    opacity: 1;
    transition: all 0.3s;
    &.open {
      transform: scale(0.6) rotateZ(0);
      opacity: 0.8;
    }
    &:hover {
      cursor: pointer;
      background-color: #eee;
    }
  }
  .chat-wrapper {
    position: relative;
    width: 0px;
    height: 0px;
    top: 12px;
    transform: scale(0); // rotateZ(45deg);
    transform-origin: left bottom;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in;
    box-shadow: var(--box-shadow);
    &.open {
      transform: scale(1) rotateZ(0) translateX(-40px) translateY(4px);
      opacity: 1;
      width: 380px;
      height: 480px;
    }
    .close:hover {
      cursor: pointer;
    }
    .chat-submit-button:hover {
      cursor: pointer;
    }
  }
}
@media (max-width: 528px) {
  .chat-wrapper {
    &.open {
      width: 300px !important;
      height: 300px;
    }
  }
  .chat {
    max-width: 300px !important;
  }
}
.chat {
  border-radius: 10px;
  overflow: hidden;
  max-width: 380px;
  height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px -20px black;
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: var(--color3);
    color: white;
    font-size: 20px;
  }
  &-body {
    padding: 15px 20px;
    height: 350px;
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: auto;
    background-color: white;
    gap: 2rem;
    flex: 1;
  }
  .chat-message-item {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #eee;
    align-self: flex-end;
    font-size: 14px;
    &.out {
      background-color: var(--color3);
      max-width: 85%;
      color: white;
      align-self: flex-start;
    }
  }
  &-footer {
    box-shadow: 0 0 3px #6b6b6b;
    background-color: var(--color3);
    display: flex;
    align-items: center;
    padding: 6px 20px;
    input {
        border-radius: 10px;
      margin-right: 6px;
      padding: 20px 15px;
      border: none;
      width: 100%;
      height: 30px;
    //   background-color: var(--color3);
    background-color: #ffffffe7;
    //   color: white;
      font-size: 16px;
      &::placeholder {
        // color: rgba(white, 0.7);
        color: rgba(black, 0.7);
      }
    }
  }
}
</style>